<template>
  <div class="order-page">
    <!-- 页面头部 -->
    <div class="header">
      <h1 class="page-title">全部工单</h1>
      <button class="back-button" @click="goToHome">
        <i class="fas fa-arrow-left"></i>
        返回首页
      </button>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filters">
      <div class="filter-row">
        <div class="filter-group">
          <label>工单状态</label>
          <select v-model="filters.status">
            <option value="">全部状态</option>
            <option value="0">新工单</option>
            <option value="1">处理中</option>
            <option value="2">已完成</option>
            <option value="3">已取消</option>
          </select>
        </div>
        <div class="filter-group">
          <label>支付状态</label>
          <select v-model="filters.payStatus">
            <option value="">全部状态</option>
            <option value="0">未支付</option>
            <option value="1">已支付</option>
          </select>
        </div>
        <div class="filter-group">
          <label>创建时间</label>
          <input type="date" v-model="filters.createTime">
        </div>
      </div>
      <div class="actions">
        <button class="btn btn-secondary" @click="resetFilters">重置筛选</button>
        <button class="btn btn-primary" @click="applyFilters">应用筛选</button>
      </div>
    </div>
    
    <!-- 工单列表 -->
    <div class="orders-container">
      <div class="orders-header">
        <div class="orders-count">共找到 {{ filteredOrders.length }} 个工单</div>
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" v-model="searchQuery" placeholder="搜索工单标题、描述或客户姓名...">
        </div>
      </div>
      
      <table class="orders-table" v-if="filteredOrders.length">
        <thead>
          <tr>
            <th>工单ID</th>
            <th>标题</th>
            <th>客户信息</th>
            <th>状态</th>
            <th>支付状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in paginatedOrders" :key="order.id">
            <td><span class="order-id">WO-{{ formatId(order.id) }}</span></td>
            <td>{{ order.title }}</td>
            <td>{{ order.name }} / {{ order.phone }}</td>
            <td>
              <span class="status-badge" :class="getStatusClass(order.status)">
                {{ getStatusText(order.status) }}
              </span>
            </td>
            <td>
              <span class="payment-status" :class="order.payStatus ? 'payment-paid' : 'payment-unpaid'">
                {{ order.payStatus ? '已支付' : '未支付' }}
              </span>
            </td>
            <td>{{ formatDate(order.createTime) }}</td>
            <td>
              <button class="action-btn view-btn" @click="viewOrder(order)">查看</button>
              <button class="action-btn edit-btn" @click="editOrder(order)">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="empty-state" v-else>
        <i class="fas fa-clipboard-list"></i>
        <p>暂无工单数据</p>
      </div>
      
      <div class="pagination" v-if="filteredOrders.length">
        <button @click="prevPage" :disabled="currentPage === 1">&laquo;</button>
        <button v-for="page in totalPages" 
                :key="page" 
                @click="setPage(page)"
                :class="{ active: currentPage === page }">
          {{ page }}
        </button>
        <button @click="nextPage" :disabled="currentPage === totalPages">&raquo;</button>
      </div>
    </div>

    <!-- 查看工单弹窗 -->
    <div class="modal-overlay" v-if="showViewModal" @click="closeViewModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h2>查看工单详情</h2>
          <button class="modal-close" @click="closeViewModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="order-details">
            <div class="detail-row">
              <div class="detail-label">工单ID:</div>
              <div class="detail-value">WO-{{ formatId(viewingOrder.id) }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">标题:</div>
              <div class="detail-value">{{ viewingOrder.title }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">描述:</div>
              <div class="detail-value">{{ viewingOrder.des || '无描述信息' }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">客户姓名:</div>
              <div class="detail-value">{{ viewingOrder.name }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">联系电话:</div>
              <div class="detail-value">{{ viewingOrder.phone }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">地址:</div>
              <div class="detail-value">{{ viewingOrder.address || '无地址信息' }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">工单类型:</div>
              <div class="detail-value">{{ getTypeText(viewingOrder.type) }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">工单状态:</div>
              <div class="detail-value">
                <span class="status-badge" :class="getStatusClass(viewingOrder.status)">
                  {{ getStatusText(viewingOrder.status) }}
                </span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-label">支付状态:</div>
              <div class="detail-value">
                <span class="payment-status" :class="viewingOrder.payStatus ? 'payment-paid' : 'payment-unpaid'">
                  {{ viewingOrder.payStatus ? '已支付' : '未支付' }}
                </span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-label">创建时间:</div>
              <div class="detail-value">{{ formatDate(viewingOrder.createTime) }}</div>
            </div>
            <div class="detail-row" v-if="viewingOrder.updateTime">
              <div class="detail-label">更新时间:</div>
              <div class="detail-value">{{ formatDate(viewingOrder.updateTime) }}</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeViewModal">关闭</button>
        </div>
      </div>
    </div>

    <!-- 编辑工单弹窗 -->
    <div class="modal-overlay" v-if="showEditModal" @click="closeEditModal">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h2>编辑工单信息</h2>
          <button class="modal-close" @click="closeEditModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form class="edit-form" @submit.prevent="saveOrder">
            <div class="form-row">
              <div class="form-group">
                <label>工单标题</label>
                <input type="text" v-model="editingOrder.title" required>
              </div>
              <div class="form-group">
                <label>工单类型</label>
                <select v-model="editingOrder.type">
                  <option value="0">安装服务</option>
                  <option value="1">维修服务</option>
                  <option value="2">咨询服务</option>
                  <option value="3">投诉处理</option>
                </select>
              </div>
            </div>
            
            <div class="form-group">
              <label>工单描述</label>
              <textarea v-model="editingOrder.des" rows="3"></textarea>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>客户姓名</label>
                <input type="text" v-model="editingOrder.name" required>
              </div>
              <div class="form-group">
                <label>联系电话</label>
                <input type="text" v-model="editingOrder.phone" required>
              </div>
            </div>
            
            <div class="form-group">
              <label>地址</label>
              <input type="text" v-model="editingOrder.address">
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>工单状态</label>
                <select v-model="editingOrder.status">
                  <option value="0">新工单</option>
                  <option value="1">处理中</option>
                  <option value="2">已完成</option>
                  <option value="3">已取消</option>
                </select>
              </div>
              <div class="form-group">
                <label>支付状态</label>
                <select v-model="editingOrder.payStatus">
                  <option value="0">未支付</option>
                  <option value="1">已支付</option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>指派人ID</label>
                <input type="text" v-model="editingOrder.dispatcherId" 
                       placeholder="请输入指派人ID">
              </div>
              <div class="form-group">
                <label>处理人ID</label>
                <input type="text" v-model="editingOrder.employeeId" 
                       placeholder="请输入处理人ID">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeEditModal">取消</button>
          <button class="btn btn-primary" @click="saveOrder">保存更改</button>
        </div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div class="loading-state" v-if="loading">
      <i class="fas fa-spinner fa-spin"></i>
      <p>加载中...</p>
    </div>
    
    <!-- 现代化的Toast通知 -->
    <transition name="toast-slide">
      <div class="toast-notification" :class="toastType" v-if="showToast">
        <i class="toast-icon" :class="toastIcon"></i>
        <span class="toast-message">{{ toastMessage }}</span>
        <button class="toast-close" @click="showToast = false">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </transition>
  </div>
</template>

<script>
import dayjs from 'dayjs';
//获取全部工单API
import { getAllOrderAPI , updateOrderAPI} from '@/apis/orderAPI';

export default {
  name: 'AllTickets',
  data() {
    return {
      filters: {
        status: '',
        payStatus: '',
        type: '',
        createTime: '',
        dispatcher: '',
        employee: ''
      },
      searchQuery: '',
      currentPage: 1,
      pageSize: 5,
      showViewModal: false,
      showEditModal: false,
      viewingOrder: {},
      editingOrder: {},
      orders: [],
      loading: false,
      error: '',
      // Toast通知相关数据
      showToast: false,
      toastMessage: '',
      toastType: 'success', // 'success' 或 'error'
      toastTimeout: null
    }
  },
  computed: {
    filteredOrders() {
      let result = this.orders;
      
      // 应用筛选条件
      if (this.filters.status !== '') {
        result = result.filter(order => order.status == this.filters.status);
      }
      
      if (this.filters.payStatus !== '') {
        result = result.filter(order => order.payStatus == this.filters.payStatus);
      }
      
      if (this.filters.type !== '') {
        result = result.filter(order => order.type == this.filters.type);
      }
      
      // 添加创建时间筛选逻辑
      if (this.filters.createTime !== '') {
        result = result.filter(order => {
          // 将订单创建时间与筛选时间进行比较
          const orderDate = dayjs(order.createTime).format('YYYY-MM-DD');
          return orderDate === this.filters.createTime;
        });
      }
      
      // 应用搜索查询
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(order => 
          order.title.toLowerCase().includes(query) ||
          order.name.toLowerCase().includes(query) ||
          order.phone.includes(query) ||
          (order.des && order.des.toLowerCase().includes(query))
        );
      }
      
      return result;
    },
    totalPages() {
      return Math.ceil(this.filteredOrders.length / this.pageSize);
    },
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredOrders.slice(start, start + this.pageSize);
    },
    toastIcon() {
      return this.toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
    }
  },
  methods: {
    // 显示Toast通知
    showToastMessage(message, type = 'success', duration = 3000) {
      this.toastMessage = message;
      this.toastType = type;
      this.showToast = true;
      
      // 清除之前的定时器
      if (this.toastTimeout) {
        clearTimeout(this.toastTimeout);
      }
      
      // 设置新的定时器
      this.toastTimeout = setTimeout(() => {
        this.showToast = false;
      }, duration);
    },
    
    async fetchOrders() {
      this.loading = true;
      this.error = '';
      try {
        const response = await getAllOrderAPI();
        if (response.code === 0) {
          this.orders = response.data;
        } else {
          this.error = '获取工单失败：' + (response.msg || '未知错误');
          this.showToastMessage(this.error, 'error');
        }
      } catch (err) {
        this.error = '网络错误，无法获取工单数据';
        this.showToastMessage(this.error, 'error');
        console.error('获取工单失败：', err);
      } finally {
        this.loading = false;
      }
    },
    goToHome() {
      this.$router.push('/home');
    },
    resetFilters() {
      this.filters = {
        status: '',
        payStatus: '',
        type: '',
        createTime: '',
        dispatcher: '',
        employee: ''
      };
      this.searchQuery = '';
      this.currentPage = 1;
    },
    applyFilters() {
      this.currentPage = 1;
    },
    viewOrder(order) {
      this.viewingOrder = {...order};
      this.showViewModal = true;
    },
    editOrder(order) {
      this.editingOrder = {...order};
      this.showEditModal = true;
    },
    closeViewModal() {
      this.showViewModal = false;
    },
    closeEditModal() {
      this.showEditModal = false;
    },
    async saveOrder() {
      try {
        const response = await updateOrderAPI(this.editingOrder);
        
        if (response.code === 0) {
          const index = this.orders.findIndex(order => order.id === this.editingOrder.id);
          if (index !== -1) {
            this.orders.splice(index, 1, {
              ...this.editingOrder,
              updateTime: new Date().toISOString()
            });
          }
          this.showEditModal = false;
          // 使用新的Toast通知
          this.showToastMessage('工单信息已更新！', 'success');
        } else {
          this.showToastMessage('更新失败：' + (response.msg || '未知错误'), 'error');
        }
      } catch (error) {
        console.error('更新工单失败：', error);
        this.showToastMessage('网络错误，更新失败，请重试', 'error');
      }
    },
    formatId(id) {
      return id.toString().padStart(8, '0');
    },
    formatDate(dateString) {
     if (!dateString) return '未知日期';
      
      try {
        const date = dayjs(dateString);
        if (date.isValid()) {
          return date.format('YYYY-MM-DD HH:mm');
        }
        return dateString;
     } catch (error) {
        console.error('日期格式化错误:', error);
        return dateString;
      }
    },
    getStatusText(status) {
      const statusMap = {
        0: '新工单',
        1: '处理中',
        2: '已完成',
        3: '已取消'
      };
      return statusMap[status] || '未知状态';
    },
    getTypeText(type) {
      const typeMap = {
        0: '安装服务',
        1: '维修服务',
        2: '咨询服务',
        3: '投诉处理'
      };
      return typeMap[type] || '未知类型';
    },
    getStatusClass(status) {
      const classMap = {
        0: 'status-new',
        1: 'status-in-progress',
        2: 'status-completed',
        3: 'status-cancelled'
      };
      return classMap[status] || '';
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    setPage(page) {
      this.currentPage = page;
    }
  },
  created() {
    this.fetchOrders();
  }
}
</script>

<style scoped>
/* 基础样式 */
.order-page {
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.filters {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.filter-group select, 
.filter-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.filter-group select:focus, 
.filter-group input:focus {
  border-color: '3498db';
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background: #f8f9fa;
  color: #555;
  border: 1px solid #e8e8e8;
}

.btn-secondary:hover {
  background: #e9ecef;
}

.orders-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.orders-count {
  font-weight: 500;
  color: #555;
}

.search-box {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 16px;
  width: 300px;
  transition: border-color 0.3s;
}

.search-box:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px;
  font-size: 14px;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th {
  background: #f8f9fa;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e8e8e8;
}

.orders-table td {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.orders-table tr:hover {
  background: #f8f9fa;
}

.order-id {
  color: #3498db;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-new {
  background: #e3f2fd;
  color: #1976d2;
}

.status-in-progress {
  background: #fff8e1;
  color: #f57c00;
}

.status-completed {
  background: #e8f5e9;
  color: #388e3c;
}

.status-cancelled {
  background: #ffebee;
  color: #d32f2f;
}

.payment-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.payment-paid {
  background: #e8f5e9;
  color: #388e3c;
}

.payment-unpaid {
  background: #fff8e1;
  color: #f57c00;
}

.action-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-right: 8px;
  transition: all 0.3s;
}

.view-btn {
  background: #e3f2fd;
  color: #1976d2;
}

.view-btn:hover {
  background: #bbdefb;
}

.edit-btn {
  background: #fff8e1;
  color: #f57c00;
}

.edit-btn:hover {
  background: #ffecb3;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  gap: 8px;
}

.pagination button {
  padding: 8px 14px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  background: #f5f5f5;
}

.pagination button.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 60px 40px;
  color: #888;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ccc;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 5px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
}

/* 工单详情样式 */
.order-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: flex;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #555;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  color: #333;
}

/* 编辑表单样式 */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 40px;
  color: #888;
}

.loading-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #3498db;
}

/* 现代化的Toast通知 */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  max-width: 400px;
  animation: toastSlideIn 0.3s ease;
}

.toast-notification.success {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
}

.toast-notification.error {
  background: linear-gradient(135deg, #f44336, #c62828);
}

.toast-icon {
  font-size: 20px;
}

.toast-message {
  flex: 1;
  font-weight: 500;
}

.toast-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.3s;
}

.toast-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-slide-enter-active, .toast-slide-leave-active {
  transition: all 0.3s ease;
}

.toast-slide-enter-from, .toast-slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }
  
  .filter-group {
    min-width: 100%;
  }
  
  .orders-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .search-box {
    width: 100%;
  }
  
  .orders-table {
    display: block;
    overflow-x: auto;
  }
  
  .modal {
    width: 95%;
    margin: 20px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .detail-label {
    width: 100%;
  }
  
  .toast-notification {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}
</style>